<template>
  <div class="addList">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="供应商名称：" prop="companyName">
              <el-input v-model="ruleForm.companyName" placeholder="请输入供应商名称，不超过30个字符" />
            </el-form-item>
          </el-col>
        <!--   <el-col :xs="8">
            <el-form-item label="供应商地址：" prop="gysdz">
              <el-cascader v-model="ruleForm.companyAdress" :options="adress" style="width:100%"></el-cascader>
            </el-form-item>
          </el-col> -->
          <el-col :xs="8">
            <el-form-item label="供应商地址：" prop="companyAdress">
              <el-input v-model="ruleForm.companyAdress" placeholder="请输入具体地址" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="联系人：" prop="contacts">
              <el-input v-model="ruleForm.contacts" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="联系电话：" prop="contactsNum">
              <el-input v-model="ruleForm.contactsNum" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="涉及业态：" prop="businessType">
              <el-checkbox-group v-model="ruleForm.businessType">
                <el-checkbox v-for="i in yetaiList" :key="i.value" :label="i.value">{{i.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="状态：">
              <el-radio-group v-model="ruleForm.status">
                <el-radio
                  :label="item.value"
                  v-for="item in zhuangtaiList"
                  :key="item.value"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 银行账号 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">银行账号</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="账户户名：">
              <el-input v-model="ruleForm.bankCardAccount" placeholder="请输入账户户名" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="银行账号：">
              <el-input v-model="ruleForm.bankCardNo" placeholder="请输入银行账号" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="开户行：">
              <el-input v-model="ruleForm.originalBank" placeholder="请输入开户行" />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
    </el-form>
  </div>
</template>

<script>
import comTitle from "@/views/com/com_title.vue";
export default {
  components: {
    comTitle
  },
  data() {
    return {
      labelWidth: "120px",
      ruleForm: {
        businessType: [] //业态
      },
      rules: {
        companyName: [
          { required: true, message: "请输入供应商名称", trigger: "bulr" }
        ],
        companyAdress: [
          { required: true, message: "请选择供应商地址", trigger: "change" }
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "bulr" }
          ],
        contactsNum: [
          { required: true, message: "请输入联系电话", trigger: "bulr" }
          ],
        businessType: [
          { required: true, message: "请选择涉及业态", trigger: "change" }
          ]
      },
      yetaiList: [
        //业态
    //     {
    //     label: '全部业务',
    //     value: '01'
    // },
     {
        label: '商超',
        value: '02'
    }, {
        label: '洗衣',
        value: '03'
    }, {
        label: '家政',
        value: '04'
    }, {
        label: '咖吧',
        value: '05'
    }
      ],
      zhuangtaiList: [
        //状态
        {
        label: '启用',
        value: '00'
    }, {
        label: '停用',
        value: '01'
    }
      ],
     /*  adress: [
        {
          value: "zhinan",
          label: "山东",
          children: [
            {
              value: "yizhi",
              label: "青岛",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "崂山"
                }
              ]
            }
          ]
        }
      ] */
    };
  },
  methods: {
  
    quxiao() {}
  }
};
</script>

<style lang="scss">

</style>